<template>
  <div class="fixed bottom-0 left-0 right-0 h-20 bg-white shadow-nav backdrop-blur-lg">
    <div class="flex justify-around items-center h-full px-2">
      <NavItem 
        v-for="item in navItems" 
        :key="item.id"
        :item="item"
        :is-active="activeTab === item.id"
        @click="$emit('tabChange', item.id)"
      />
    </div>
    
    <!-- 底部指示条 -->
    <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-black rounded-full"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import NavItem from './NavItem.vue'

const navItems = ref([
  {
    id: '交接',
    label: '交接',
    icon: '/assets/CodeBubbyAssets/10069_20065/5.svg',
    active: true
  },
  {
    id: '待办',
    label: '待办',
    icon: '/assets/CodeBubbyAssets/10069_20065/4.svg',
    active: false
  },
  {
    id: '知会',
    label: '知会',
    icon: '/assets/CodeBubbyAssets/10069_20065/3.svg',
    active: false
  },
  {
    id: '投诉',
    label: '投诉',
    icon: '/assets/CodeBubbyAssets/10069_20065/2.svg',
    active: false
  },
  {
    id: '查询',
    label: '查询',
    icon: '/assets/CodeBubbyAssets/10069_20065/1.svg',
    active: false
  }
])

const activeTab = ref('交接')

defineEmits(['tabChange'])
</script>

<style scoped>
.shadow-nav {
  box-shadow: 0px -0.5px 0px rgba(0, 0, 0, 0.10);
}
</style>